<extend name="./public/frame.html"/>
<block name="content">
    <blockquote class="layui-elem-quote search">
        <form action=""  method="post" onsubmit="validate_form(this)">
            <!--<div class="layui-inline">
                <select name="province_id" id="province_id" class="layui-input" lay-filter="province" style="width: 120px;" onclick="getProvinceList();">
                    <option value="">请选择省份</option>
                    <?php foreach($provinceList as $key=>$value):?>
                    <option value="<?php echo $value['region_id'];?>"><?php echo $value['region_name'];?></option>
                    <?php endforeach;?>
                </select>
            </div>
            <div class="layui-inline">
                <select name="city_id" id="city_id" class="layui-input" lay-filter="city_id" style="width: 120px;">
                    <option value="">请选择城市</option>
                </select>
            </div>-->
            <div class="layui-inline">
                <select id="all_order" name="all_order" class="layui-input" style="width: 90px;">
                    <option value="">全部订单</option>
                    <option value="1" <?php if($all_order == 1):?>selected<?php endif;?>>普通订单</option>
                    <option value="2" <?php if($all_order == 2):?>selected<?php endif;?>>测试订单</option>
                </select>
            </div>
            <div class="layui-inline">
                <select lay-verify="required" lay-search="" name="fleet_id" id="fleet_id" class="layui-input"
                        style="width: 120px;margin-top: 3px;">
                    <option value="">所属车队</option>
                    <volist name="fleet_list" id="vo">
                        <option value="{$vo['id']}" <?php if($fleet_id==$vo['id']){?> selected="selected" <?php }?> >{$vo['name']}</option>
                    </volist>
                </select>
            </div>
            <div class="layui-input-inline">
                <div class="layui-inline">
                    <input type="text" class="layui-input date" id="start_time" name="start_time" value="<?php echo $start_time;?>" placeholder="开始日期" style="width: 120px;">
                </div>
                <div class="layui-inline">
                    <input type="text" class="layui-input date" id="end_time" name="end_time" value="<?php echo $end_time;?>" placeholder="结束日期" style="width: 120px;">
                </div>
            </div>
            <div class="layui-inline">
                <input class="layui-btn" type="submit" value="搜索">
            </div>
        </form>
    </blockquote>
    <div id="container" style="min-width:400px;height:400px"></div>
    <div id="order_money" style="min-width:400px;height:400px"></div>
<!--    <div id="timeOrderNum" style="min-width:400px;height:400px"></div>-->
    <div id="container2" style="min-width:400px;height:400px"></div>
    <div id="container3" style="min-width:400px;height:400px"></div>
    <div id="container5" style="min-width:400px;height:400px"></div>
    <div id="container6" style="min-width:400px;height:400px"></div>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script>
        layui.use(['table','laydate' ],function () {
            var table = layui.table, laydate = layui.laydate;
            //下单时间检索
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'date'
                    ,trigger: 'click'
                });
            });
        });
        function validate_form() {
            var date1=new Date($('#start_time').val());
            var time1=(date1.getTime())/1000;
            var date2=new Date($('#end_time').val());
            var time2=(date2.getTime())/1000;;
            console.log(time1)
            console.log(time2)
            if (time1>time2){
                layer.msg('结束时间不能早于开始时间');return false;

            }
        }
        </script>
    <script>
        var chart = Highcharts.chart('container',{
            chart: {
                type: '<?php echo $type;?>'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天订单数据实时统计'
            },
            xAxis: {
                categories: [
                <?php foreach($dateArray as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>
        ],
        crosshair: true
        },
        yAxis: {
            min: 0,
                title: {
                text: '订单数量'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
        },
        plotOptions: {
        <?php echo $type;?>: {
                borderWidth: 0,
                    dataLabels: {
                    // 开启数据标签

                    enabled: <?php if($type == 'line'):?>true<?php else:?>false<?php endif;?>
                },
            },

        },
        series: [{
            name: '订单总数',
            data: [<?php echo $result['count'];?>]
        },  {
            name: '取消订单',
                data: [<?php echo $result['cancel_count'];?>]
        }, {
            name: '已完成订单',
                data: [<?php echo $result['finish_count'];?>]
        }]
        });

    </script>
    <script>
        var chart = Highcharts.chart('timeOrderNum',{
            chart: {
                type: '<?php echo $type;?>'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天时间段订单数据量'
            },
            xAxis: {
                categories: [
                <?php foreach($timeArr as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>
        ],
        crosshair: true
        },
        yAxis: {
            min: 0,
                title: {
                text: '数量'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
        },
        plotOptions: {
        <?php echo $type;?>: {
                borderWidth: 0,
                    dataLabels: {
                    // 开启数据标签
                    enabled: <?php if($type == 'line'):?>true<?php else:?>false<?php endif;?>
                },
            },
        },
        series: [{
            name: '订单数量',
            data: [<?php echo $sumOrderNumStr;?>]
        }]
        });
    </script>

    <script>
        var chart = Highcharts.chart('order_money', {
            chart: {
                type: 'column'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天订单金额'
            },
            xAxis: {
                categories: [<?php foreach($dateArray as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '金额（元）'
                },
                stackLabels: {  // 堆叠数据标签
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        '总量: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                            textOutline: '1px 1px black'
                        }
                    }
                }
            },
            series: [{
                name: '订单金额',
                data:[<?php echo $result['need_price'];?>]
            }, {
                name: '优惠金额',
                data: [<?php echo $result['coupon_price'];?>]
            }]
        });
</script>

    <script>
        //修改
        var chart = Highcharts.chart('container2', {
            chart: {
                type: 'column'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天时间段订单总数'
            },
            xAxis: {
                categories: [<?php foreach($dateArray as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>]
        },
        yAxis: {
            min: 0,
                title: {
                text: '订单总量'
            },
            stackLabels: {  // 堆叠数据标签
                enabled: true,
                    style: {
                    fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    '总量: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                    dataLabels: {
                    enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                        // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                        textOutline: '1px 1px black'
                    }
                }
            }
        },
        series: [{
            name: '拼车订单',
            data: [{$result['no_contract']}]
        }, {
            name: '包车订单',
            data: [{$result['is_contract']}]
        }]
        });

    </script>



    <script>
        var chart = Highcharts.chart('container3', {
            chart: {
                type: 'column'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天时间段订单金额'
            },
            xAxis: {
                categories:  [
                <?php foreach($dateArray as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>
        ]
        },
        yAxis: {
            min: 0,
                title: {
                text: '订单金额'
            },
            stackLabels: {  // 堆叠数据标签
                enabled: true,
                    style: {
                    fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    '总量: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                    dataLabels: {
                    enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                        // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                        textOutline: '1px 1px black'
                    }
                }
            }
        },
        series: [{
            name: '订单总额',
            data: [<?php echo $result['need_price'];?>]
        },{
            name: '优惠金额',
                data: [<?php echo $result['coupon_price'];?>]
        },]
        });

    </script>
    <script>
        var chart = Highcharts.chart('container6', {
            chart: {
                type: 'column'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天时间段拼车订单金额'
            },
            xAxis: {
                categories: [<?php foreach($dateArray as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>]
        },
        yAxis: {
            min: 0,
                title: {
                text: '订单金额'
            },
            stackLabels: {  // 堆叠数据标签
                enabled: true,
                    style: {
                    fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    '总量: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                    dataLabels: {
                    enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                        // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                        textOutline: '1px 1px black'
                    }
                }
            }
        },
        series: [{
            name: '拼车订单金额',
            data: [{$result['no_contract_price']}]
        }, {
            name: '优惠金额',
            data: [{$result['no_contract_coupon']}]
        }]
        });

    </script>

    <script>
        var chart = Highcharts.chart('container5', {
            chart: {
                type: 'column'
            },
            title: {
                text: '近<?php echo count($dateArray);?>天时间段包车订单金额'
            },
            xAxis: {
                categories: [<?php foreach($dateArray as $key=>$value):?>
        '<?php echo $value;?>',
        <?php endforeach;?>]
        },
        yAxis: {
            min: 0,
                title: {
                text: '订单金额'
            },
            stackLabels: {  // 堆叠数据标签
                enabled: true,
                    style: {
                    fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    '总量: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                    dataLabels: {
                    enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                        // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                        textOutline: '1px 1px black'
                    }
                }
            }
        },
        series: [{
            name: '包车订单金额',
            data: [{$result['is_contract_price']}]
        }, {
            name: '优惠金额',
            data: [{$result['is_contract_coupon']}]
        }]
        });

    </script>

</block>
